<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="wyr">
        <meta name="keywords" content="CGI开发">
        <link rel="stylesheet" href="css/my.css">
        <title>主页面</title>
        <style>
            #topper{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                height: 50px;
                align-items: center;
                border-bottom: 1px solid lightgray;
            }
            #logo{
                height: 45px;
            }
            .userimg{
                width: 50px;
                height: 50px;
                border-radius: 50%;/*设置为圆弧边框*/
            }
            #userInfo{
                margin: 0 10px;
            }
            #info{
                display: flex;
                flex-direction: row;
                align-items: center;
            }
            #main{
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
                height: 100%;
            }
            #menu{
                width: 240px;
                border-right: 1px solid lightgray;
                align-items: center;
            }
            #footer{
                text-align: center;
                height: 30px;
            }
            #container{
                height: 98%;
                display: flex;
                flex-direction: column;
                
            }
            #main iframe{
                height: 100%;
                width: 100%;
            }
            ul,li {
                list-style: none;
                margin: 0;
                padding: 0;
            }
            li{
                padding: 10px;
                margin: 10px;
            }
            li:hover{
                background-color: aqua;
                transform: scale(1.2,1.2);
                transition: all 2s ;              
            }
            li>a{
                color: black;
                text-decoration: none;
            }
            li:hover{
                background-color: lightgray;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="topper">
                <img id="logo" src="http://www.qfedu.com/images/index2021/logo-edu.png" alt="logo">
    
                <div id="info">
                    <b id="userInfo">wyr</b>
                    <img class="userimg" src="/img/GULULU-冰奶昔.png" alt="userimg">
                </div>
            </div>

            <div id="main" class="row">
                <div id="menu">
                    <ul>
                        <li>
                            <a target="content_frame" href="page1.html">111</a>
                        </li>
                        <li>
                            <a target="content_frame" href="page2.html">222</a>
                        </li>
                        <li>
                            <a target="content_frame" href="page3.html">333</a>
                        </li>
                        <li>
                            <a target="content_frame" href="page4.html">444</a>
                        </li>
                    </ul>
                </div>
                <ul>
                    <iframe name="content_frame" frameborder="0"></iframe>
                </ul>
            </div>

            <div id="footer">
                <b>版本所有@千锋西安-IoT2402</b><br>
                <i>2024-10-10</i>
            </div>
        </div>
       
    </body>
</html>